<template>
    <div>
        <BackC />
        <main>
            <div class="account-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="account" label="手机号码" placeholder="请输入手机号码" />
                </van-cell-group>
            </div>

            <div class="password-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
                </van-cell-group>
            </div>
            <router-link tag="p" replace to="/signup">没有账号，去注册</router-link>
            <div class="btn" :class="account && password ? 'active' : ''" @click="login">登录</div>
        </main>
    </div>
</template>

<script>
import BackC from "@/components/BackC.vue";
export default {
    props: ["user", "setUser"],
    data() {
        return {
            account: "",
            password: "",
        };
    },
    methods: {
        login() {
            if (this.account && this.password) {
                this.axios("http://127.0.0.1/login", {
                    params: {
                        account: this.account,
                        password: this.password,
                    },
                }).then(({ data }) => {
                    if (data.status == 202) {
                        this.$toast.fail(data.message);
                    }
                    if (data.status == 200) {
                        this.$toast.success(data.message);
                        let user = data.passname;
                        this.$emit("setUser", { user, account: this.account });
                        this.$router.go(-1);
                    }
                });
            }
        },
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.account = "";
            vm.password = "";
        });
    },
    components: {
        BackC,
    },
};
</script>

<style lang="scss" scoped>
main {
    padding: 20vh 10vw 0;
    .inp {
        padding-bottom: 1vh;
        border-bottom: 2px solid rgba($color: #ccc, $alpha: 0.2);
        margin-bottom: 1vh;
    }
    p {
        font-size: 14px;
        color: rgba($color: #bababa, $alpha: 1);
        margin-bottom: 2vh;
    }
    .btn {
        width: 100%;
        height: 3.125rem;
        border-radius: 30px;
        text-align: center;
        line-height: 3.125rem;
        background-color: #ccc;

        color: #fff;
        font-weight: 600;
    }
    .active {
        background-color: #1ba784;
    }
}
</style>
